<template>
  <div class="panel-view">
    <a-divider orientation="center" :plain="false">样式面板</a-divider>
    <a-form :model="formState" :label-col="labelCol" :wrapper-col="wrapperCol" layout="horizontal" class="form-view">
      <a-form-item label="名称：">
        <a-input id="inputNumber" v-model:value="formState.name" :disabled="true" size="small" />
      </a-form-item>
      <a-form-item label="字号：">
        <a-input-number id="inputNumber" v-model:value="formState.fontsize" :min="10" :max="20" size="small" @change="handleFontsize" />
      </a-form-item>
      <a-form-item label="前景色：">
        <color-picker v-model:pureColor="formState.fontcolor" v-model:gradientColor="gradientColor" format="hex6" shape="circle" use-type="both" @pureColorChange="handleTextColor" />
        <a-input id="inputNumber" v-model:value="formState.fontcolor" :disabled="true" size="small" style="float: right; width: 80%" />
      </a-form-item>
      <a-form-item label="背景色：">
        <color-picker v-model:pureColor="formState.backgrondColor" v-model:gradientColor="gradientColor" format="hex6" shape="circle" use-type="both" @pureColorChange="handleBodyColor" />
        <a-input id="inputNumber" v-model:value="formState.backgrondColor" :disabled="true" size="small" style="float: right; width: 80%" />
      </a-form-item>
      <a-form-item label="边框：">
        <color-picker v-model:pureColor="formState.borderColor" v-model:gradientColor="gradientColor" format="hex6" shape="circle" use-type="both" @pureColorChange="handleBorderColor" />
        <a-input id="inputNumber" v-model:value="formState.borderColor" :disabled="true" size="small" style="float: right; width: 80%" />
      </a-form-item>
    </a-form>
  </div>
</template>
<script lang="ts" setup>
let props = defineProps(["currentNode"])

watch(
  () => props.currentNode,
  () => {
    let attrs = props.currentNode && props.currentNode.attrs
    if (attrs) {
      const { body, text, rect } = attrs
      formState.backgrondColor = body.fill
      formState.fontcolor = text.fill
      formState.borderColor = rect.fill
      formState.fontsize = text.fontSize
      formState.name = text.text
    }
  },
  {
    deep: true,
  },
)
const formState = reactive({
  name: "",
  delivery: false,
  fontsize: "",
  fontcolor: "",
  backgrondColor: "",
  borderColor: "",
})

const wrapperCol = reactive({
  span: 24,
})
const labelCol = reactive({
  span: 6,
})

const pureColor = ref("")
const gradientColor = ref("linear-gradient(0deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 100%)")

//改字号
const handleFontsize = (fontSize: number): void => {
  props.currentNode.setAttrs({
    text: {
      fontSize: Number(fontSize),
    },
  })
}

//文字颜色
const handleTextColor = (color: string): void => {
  props.currentNode.setAttrs({
    text: {
      fill: color,
    },
  })
}

//填充
const handleBodyColor = (color: string): void => {
  props.currentNode.setAttrs({
    body: {
      fill: color,
    },
  })
}

//边框
const handleBorderColor = (color: string): void => {
  props.currentNode.setAttrs({
    body: {
      stroke: color,
    },
    top: {
      stroke: color,
    },
  })
}
</script>
<style scoped lang="less">
.panel-view {
  position: relative;
  flex-basis: 260px;
  background-color: #fff;
  height: calc(100vh - 55px);
  box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.1);
  .form-view {
    padding: 0 15px;
    box-sizing: border-box;
  }
  .ant-input-number {
    width: 100%;
  }
}
</style>
